<template>
  <div @click="init" class="tagClude_con">
    <h3 class="h3">标签云</h3>
    <router-link
      :to="'/tag/' + item.tagid"
      class="tagClude"
      v-for="item in tagdata"
      :key="item.id"
      :style="{
        backgroundColor: `rgb(${item.rgb1},${item.rgb2},${item.rgb3})`,
        boxShadow: shadow + `rgb(${item.rgb1},${item.rgb2},${item.rgb3},0.5)`,
      }"
      >{{ item.tagname }}</router-link
    >
  </div>
</template>

<script>
export default {
  name: "tagClude",
  props: ["tagdata"],
  data() {
    return {
      shadow: "0 2px 12px 0 ",
    };
  },
  methods: {
    init() {
      console.log(this.tagdata);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.tagClude {
  display: inline-block;
  padding: 7px;
  margin-bottom: 10px;
  margin-right: 20px;
  color: #fff;
  border-radius: 15px;
  transition: all 0.3s linear;
}
.tagClude:hover {
  border-radius: 0;
  -webkit-transform: translate3d(0, -4px, 0);
  transform: translate3d(0, -5px, 0);
}

.tagClude_con {
  padding: 20px 20px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  h3 {
    margin-bottom: 20px;
  }
  & h3::after {
    content: "";
    display: block;
    margin-top: 20px;
    width: 60px;
    height: 4px;
    border-radius: 20px;
    background-color: rgb(51, 51, 51);
    transition: width 0.3s ease;
  }
}
.tagClude_con:hover .h3::after {
  width: 100%;
}
</style>
